<template>
  <MyModal ref="myModal" title="表情选择" :top="30" :width="600">
    <template #content>
      <a-tabs v-model:activeKey="activeKey" tab-position="top" :animated="true">
        <a-tab-pane key="1" tab="QQ" style="height: 400px">
          <a-row>
            <a-col v-for="(item, index) in QQFaceList" :span="2" :key="index">
              <div
                class="qEmoji"
                :style="{ 'background-position': emojiPosition(index) }"
                @click="setEmoji(item.code)"
              ></div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="微信" style="height: 400px">
          <a-row>
            <a-col v-for="(item, index) in emojiList" :span="2" :key="index">
              <div
                class="eList"
                @click="setEmoji(item)"
                :style="{ 'background-position': emojiPosition(index) }"
              ></div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { QQFaceList } from '@/components/emoji/emoji.ts'
import { emojiList } from '@/components/emoji/emoji.ts'

const myModal = ref()

const showModal = (rowInfo: object) => {
  myModal.value?.showModal()
}

let activeKey = ref<string>('1')

const emojiPosition = (index: any) => {
  return '-' + (index % 15) * 29 + 'px -' + parseInt(index / 15) * 29 + 'px'
}

const setEmoji = (emoji: string) => {
  emit('okEmoji', emoji)
  myModal.value.cancelModal()
}

const emit = defineEmits<{
  okEmoji: [emoji: string]
}>()

defineExpose({
  showModal,
})
</script>

<style lang="less" scoped>
.qEmoji {
  background: url('/src/components/emoji/images/1.png');
  height: 25px;
  width: 25px;
  margin: 0 auto;
}
.eList {
  background: url('/src/components/emoji/images/2.png');
  height: 25px;
  width: 25px;
  margin: 0 auto;
}
</style>
